<!--
  -- @module vue-demo
  -- @desc 详情
  -- @author ervinewell on 2017/4/7
  -->

<template>
  <div>
    <form>
      <div class="form-body">
        <label>姓名：</label>
        <input name="name" @input="changeParams" :value="detail.name" />
      </div>
      <div class="form-body">
        <label>年级：</label>
        <select name="grade" @input="changeParams" :value="detail.grade">
          <option value="2013">2013</option>
          <option value="2014">2014</option>
          <option value="2015">2015</option>
        </select>
      </div>
      <div class="form-body">
        <label>描述：</label>
        <input name="desc" @input="changeParams" :value="detail.desc" />
      </div>
    </form>
    <p class="summary">
      我叫{{ detail.name || 'XXX' }}，来自{{ detail.grade || 'XXX' }}级。<br />
      {{ detail.desc || '...' }}
    </p>
  </div>
</template>

<style scoped>
  .form-body {
    margin: 5px 0;
  }

  .summary {
    margin-top: 20px;
  }
</style>

<script>
  import { mapState } from 'vuex';

  import * as types from './store/types';

  export default {
    methods: {
      changeParams(e) {
        this.$store.dispatch(types.CHANGE_PARAMS, {
          key: e.target.name,
          value: e.target.value,
        });
      },
    },
    computed: {
      ...mapState({
        detail: state => state.detail,
      }),
    },
  }
</script>
